<template>
	<view class="content">
		<view class="group_section">
			<view class="goods" v-for="(item,index) in orderdatas.cartInfo" :key="index">
				<image class="goodsImg" :src="item.productInfo.image" mode="aspectFill"></image>
				<view class="goods_info">
					<view class="goods_name ellipsis_2">{{item.productInfo.storeName}}</view>
					<view class="goods_attr">{{item.attrInfo.sku}}</view>
					<view class="goods_price">
						<view class="price">
							<view class="pricesign iconfont">&#xe604;</view>
							<view class="money">{{item.attrInfo.price}}
								<text >+{{item.attrInfo.integral}}通宝</text>
							</view>
						</view>
						<view class="goods_num">x{{item.cartNum}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="section">
			<view class="reason">
				<view class="reason_title"><text style="color: #E41F19;">*</text>退款原因</view>
				<view class="reason_fr">
					<picker class="picker" @change="bindPickerChange" :value="index" :range="reasonList" mode="selector">
						<view class="uni-input">
							<view class="">{{text}}</view>
							<view class="iconfont">&#xe601;</view>
						</view>
					</picker>
				</view>
			</view>
			<view class="reason">
				<view class="reason_title">退款说明</view>
				<view class="reason_fr">
					<view class="uni_text">
						<textarea class="txt" placeholder="请输入退款原因" v-model="refund_reason_wap_explain" />
					</view>
				</view>
			</view>
		</view>
		<!--  -->
		<view class="section">
			<view class="reason">
				<view class="reason_title">退款金额</view>
				<view class="reason_fr">
					<text class="iconfont sign">&#xe604;</text>
					<text class="reson_text">{{orderdatas.totalPrice}}</text>
					<text class="reson_text" > +{{orderdatas.totalIntegral}}通宝</text>
				</view>
			</view>
			
		</view>
		<view class="section">
			<view class="reasonline">退款凭证(限3张）</view>
			<view class="reasonpic">
				<view class="imglist" v-if="refundImage.length != 0" v-for="(item,index) in refundImage" :key="index">
					<image class="image" :src="item" mode=""></image>
					<image class="closeImg" src="https://taobaoke-paimai.oss-cn-beijing.aliyuncs.com/close.png" mode="" @click="cancelImg(index)"></image>
				</view>
				<view class="imglist" v-if="refundImage.length < 3" @click="upload">
					<image class="image" src="https://taobaoke-paimai.oss-cn-beijing.aliyuncs.com/upload.png" mode=""></image>
				</view>
			</view>
		</view>
		
		<view class="btnBotm" @click="pickUp(orderdatas,type)">提交</view>
		
		
	</view>
</template>

<script>
	import urlConfig from '@/common/api/config.js'
	export default {
		data() {
			return {
				orderdatas:{},
				reasonList:[],
				index:-1,
				text:'' ,// 原因
				refund_reason_wap_explain:''  ,// 退款说明
				refundImage:[],
				type:''
			}
		},
		onLoad(options) {
			console.log(options)
			if (Object.keys(options).length != 0) {
				this.key = options.key;
				this.type = options.type;
				this.getOrderDetail()
			}
			this.getAfterReason();
			let that = this;
			uni.$on('myOrderDetail',function(data){
			    console.log('监听到事件来自 update ，携带参数 msg 为：' + data.msg);
				that.getOrderDetail(); //调用加载
			})
		},
		methods: {
			// 获取订单详情
			getOrderDetail: function () {
				let that = this;
				that.api.shoppingOrderDetail(that.key).then(res => {
					// console.log(res)
					that.orderdatas = res.data;
					that.refund_reason_wap_explain = res.data.refundReasonWapExplain
					that.text = res.data.refundReasonWap;
					if (res.data.refundReasonWapImg != "" && res.data.refundReasonWapImg != null) {
						that.refundImage = res.data.refundReasonWapImg.split(",")
					} else {
						that.refundImage = [];
					}
					
				})
			},
			// 获取退款原因
			getAfterReason: function () {
				this.api.getRefundReason().then(res => {
					console.log(res)
					this.reasonList = res.data;
				})
			},
			// 选择退款原因
			bindPickerChange: function (e) {
				console.log(e)
				this.index = e.detail.value;
				this.text = this.reasonList[e.detail.value]
			},
			// 上传凭证
			upload: function () {
				let that = this;
				uni.chooseImage({
				    count: 1, //默认9
				    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				   sourceType: ['album','camera'], //从相册选择
				    success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.uploadFile({
							url: urlConfig + 'uploadService', //接口地址
							filePath: tempFilePaths[0],
							name: 'file',
							success: (res) => {
								console.log(res); 
								var data = JSON.parse(res.data);
								console.log(data,"======")
								that.refundImage.push(data.data.data);
							}
						});
					}
				});	
			},
			// 删除图片
			cancelImg: function (index) {
				this.refundImage.splice(index,1)
			},
			// 提交退款申请
			pickUp: function (orderdatas,type) {
				let that = this;
				if (that.text == '') {
					that.tui.toast('请选择退款原因')
					return
				}
				that.api.pickUpRefund({
					refund_reason_wap_explain:that.refund_reason_wap_explain,
					refund_reason_wap_img:that.refundImage.join(","),
					text:that.text,
					uni:orderdatas.unique
				}).then(res => {
					console.log(res)
					that.tui.toast(res.data)
					setTimeout(function () {
						uni.$emit('myOrder',{msg:'页面更新'})
						uni.$emit('myOrderDetail',{msg:'页面更新'});
						uni.$emit("myRrfund",{msg:'页面更新'})
					},500)
					setTimeout(function () {
						uni.navigateBack({
							delta: 1
						});
					},1500)
				})
				
			}
		}
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		box-sizing: border-box;
		letter-spacing: 3rpx;
		background: #F5F5F5;
		font-family: 'PingFang SC';
		font-size: 28rpx;
		color: #333333;
		padding: 20rpx;
	}
	.content {
		width: 100%;
		box-sizing: border-box;
		padding-bottom: 150rpx;
	}
	
	.group_section {
		width: 100%;
		box-sizing: border-box;
		background: #FFFFFF;
		border-radius: 12rpx;
		margin-bottom: 20rpx;
		.goods {
			width: 100%;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			padding: 20rpx;
			border-bottom: 2rpx solid #F5F5F5;
			&:last-child {
				border-bottom: none;
			}
			.goodsImg {
				width: 160rpx;
				height: 160rpx;
				border-radius: 16rpx;
			}
			.goods_info {
				width: calc(100% - 160rpx);
				box-sizing: border-box;
				padding-left: 20rpx;
				display: flex;
				flex-flow: column;
				justify-content: space-between;
				font-size: 28rpx;
				color: #140005;
				.goods_price {
					width: 100%;
					box-sizing: border-box;
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 22rpx;
					color: #212121;
					.price {
						display: flex;
						justify-content: flex-start;
						align-items: center;
						font-size: 28rpx;
						color: #E42221;
						.pricesign {
							color: #FFDA71;
							font-size: 26rpx;
							// padding-top: 5rpx;
						}
					}
				}
				.goods_attr {
					width: 100%;
					box-sizing: border-box;
					font-size: 24rpx;
					color: #999999;
				}
				
			}
			
			
		}
	}
	.section {
		width: 100%;
		box-sizing: border-box;
		background: #FFFFFF;
		border-radius: 12rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
		.reason {
			width: 100%;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-bottom: 20rpx;
			&:last-child {
				padding-bottom: 0rpx;
			}
			.reason_title {
				width: 150rpx;
				box-sizing: border-box;
				line-height: 60rpx;
				text-align: right;
			}
			.reason_fr {
				width: calc(100% - 150rpx);
				box-sizing: border-box;
				padding-left: 50rpx;
				.picker {
					width: 100%;
					box-sizing: border-box;
					.uni-input {
						width: 100%;
						box-sizing: border-box;
						display: flex;
						justify-content: space-between;
						align-items: center;
						flex-flow: wrap;
						.iconfont {
							width: 30rpx;
							text-align: right;
							color: #999999;
						}
					}
				}
				.uni_text {
					width: 100%;
					box-sizing: border-box;
					height: 60rpx;
					line-height: 60rpx;
					.txt {
						width: 100%;
						height: 100%;
						line-height: 60rpx;
						font-size: 28rpx;
					}
				}
				.reson_text {
					font-size: 36rpx;
					color: #E42221;
				}
				.sign {
					color: #FFDA71;
					font-size: 32rpx;
				}
			
			
			
			
			}
			
			
		}
		.reasonline {
			width: 100%;
			box-sizing: border-box;
			line-height: 40rpx;
			padding-bottom: 10rpx;
		}
		.reasonpic {
			width: 100%;
			box-sizing: border-box;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			padding-top: 10rpx;
			.imglist {
				width: 143rpx;
				height: 143rpx;
				margin-right: 20rpx;
				position: relative;
				.image {
					width: 100%;
					height: 100%;
				}
				.closeImg {
					width: 40rpx;
					height: 40rpx;
					position: absolute;
					top: -15rpx;
					right: -15rpx;
					z-index: 10;
				}
				
			}
			
			
			
		}
		
		
		
		
	}
	.btnBotm {
		width: 100%;
		box-sizing: border-box;
		line-height: 90rpx;
		text-align: center;
		color: #FFFFFF;
		background: #E42221;
		font-size: 36rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 155;
	}
	
	
	
	

</style>
